<template>

  <div class="mainbody">

<el-card class="text">
    <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num" >
   会员数量 <span >{{usercount}}</span>
</el-card>
      
      </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num"  @click.native="showUserInWelcome()">
  已交会费会员 <span>{{payusercount}}</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  未交会费会员 <span>{{noPayusercount}}</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
         平台已考执照数 <span>{{lisencecount}}</span>
</el-card>
      
      </div></el-col>
</el-row>
<ve-line :data="memberData"></ve-line>
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
   单位数量 <span>{{orgcount}}</span>
</el-card>
      
      </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num"  @click.native="showDeptInWelcome()">
  已交会费单位 <span>{{payorgcount}}</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
  飞行营地 <span>{{flyteam}}</span>
</el-card>
      
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
      <el-card class="box-card num">
         训练单位 <span>{{trainteam}}</span>
</el-card>
      
      </div></el-col>
</el-row>

<ve-line :data="teamData"></ve-line>
</el-card>
<!-- 已交会费单位 -->
 <el-dialog
  title="该单位列表"
  :visible.sync="showDeptDialogVisible"
  width="50%"
  >
  <el-table
     :data="thisDeptList"
      style="width: 100%">
      <el-table-column
        prop="orgName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="orgSn"
        label="会员号"
        width="180">
      </el-table-column>
      <el-table-column
       prop="orgType" label="性质" >
          <template slot-scope="scope" >
            <p v-if="scope.row.orgType===1">协会</p>
            <p v-if="scope.row.orgType===2">学校</p>
              <p v-if="scope.row.orgType===3">企业</p>
            <p v-if="scope.row.orgType===null"></p>
          </template>
      </el-table-column>
    </el-table>
    </el-dialog>
  <!-- 已交会费会员 -->
 <el-dialog
  title="该会员列表"
  :visible.sync="showUserDialogVisible"
  width="50%"
  >
  <el-table
     :data="thisUserList"
      style="width: 100%">
      <el-table-column
        prop="userName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userSnNumber"
        label="会员号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userAge"
        label="年龄">
      </el-table-column>
    </el-table>


 
</el-dialog>
  </div>
 
</template>
<style lang="less" scoped>
// .mainbody{
//     height: 100%;
//     width: 100%;
//     margin: 0;
//     padding: 0;
//     font-family: "微软雅黑";
//     background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
//     background-size: 400%;
//     animation: bganimation 15s infinite;

// }
// .text{
//     color: white;
//     text-align: center;
//     text-transform: uppercase;
//      height: 100%;
//     width: 100%;
   
//     font-size: 22px;
// }
// @keyframes bganimation {
//     0%{
//         background-position: 0% 50%;
//     }
//      50%{
//         background-position: 100% 50%;
//     }
//      100%{
//         background-position: 0% 50%;
//     }
// }

</style>
<script>
 export default {
    data() {
      return {

        usercount:0,
        payusercount:0,
        noPayusercount:0,
        lisencecount:0,
        orgcount:0,
        payorgcount:0,
        flyteam:0,
        trainteam:0,
        thisDeptList:[],
        thisUserList:[],
        showDeptDialogVisible:false,
        showUserDialogVisible:false,
        memberData: {
          columns: ['日期', '新增会员', '缴费会员', '缴费率'],
          rows: [
            { '日期': '2020/8/5', '新增会员': 0, '缴费会员': 0, '缴费率': 0 },
            { '日期': '2020/8/6', '新增会员': 0, '缴费会员': 0, '缴费率': 0 },
            { '日期': '2020/8/7', '新增会员': 0, '缴费会员': 0, '缴费率': 0 },
            { '日期': '2020/8/8', '新增会员': 0, '缴费会员': 0, '缴费率': 0 },
            { '日期': '2020/8/9', '新增会员': 0, '缴费会员': 0, '缴费率': 0 },
            { '日期': '2020/8/10', '新增会员': 0, '缴费会员': 0, '缴费率': 0 }
          ]
        },
         teamData: {
          columns: ['日期', '新增单位', '缴费单位', '缴费率'],
          rows: [
            { '日期': '2020/8/5', '新增单位': 0, '缴费单位': 0, '缴费率': 0 },
            { '日期': '2020/8/6', '新增单位': 0, '缴费单位': 0, '缴费率': 0 },
            { '日期': '2020/8/7', '新增单位': 0, '缴费单位': 0, '缴费率': 0 },
            { '日期': '2020/8/8', '新增单位': 0, '缴费单位': 0, '缴费率': 0 },
            { '日期': '2020/8/9', '新增单位': 0, '缴费单位': 0, '缴费率': 0 },
            { '日期': '2020/8/10', '新增单位': 0, '缴费单位': 0, '缴费率': 0 }
          ]
        },
      }
    },
    created(){
this.getUsercount();

    },
    methods:{
      async getUsercount(){
const {data:res } =await this.$http.get("user/getUserNum");
this.usercount=res.data.userNum
this.payusercount=res.data.userpayed
this.noPayusercount=this.usercount-this.payusercount
this.orgcount=res.data.orgcount
this.payorgcount=res.data.payorgcount
      },
      async showUserInWelcome(){
        console.log("calcla")
        this.showUserDialogVisible=true
const {data:res } =await this.$http.get("user/showUserInWelcome");

 if (res.code !== 200) {
        this.$message.error("请求失败！");
      } 
     this.thisUserList=res.data
      }
,
      async showDeptInWelcome(){
        this.showDeptDialogVisible=true
const {data:res } =await this.$http.get("organization/showDeptInWelcome");
  console.log(res.data)
 if (res.code !== 200) {
        this.$message.error("请求失败！");
      } 
     this.thisDeptList=res.data
      }
    }
  }
</script>